<template>
    <div class="distribution">
        <div class="left">
            <personnelList @userId="getfindUserSubscription" ref="personnelList"></personnelList>
        </div>
        <div class="content">
            <allocation :personnelItem="personnelItem" @personnel="getfindUserSubscription"></allocation>
            <pagination :length="tableData.length" :pagination="pagination" float="right"></pagination>
            <el-table
                ref="table"
                :data="tableData.slice((pagination.currpage - 1) * pagination.pagesize, pagination.currpage * pagination.pagesize)"
                tooltip-effect="dark"
                style="width: 100%"
                v-loading="loading"
                :header-cell-style="getRowClass"
                border
            >
                <el-table-column prop="countryName" :label="$t('m.label.country')" width="150"></el-table-column>
                <el-table-column
                    prop="productModelNumber"
                    :label="$t('m.label.productModelNumber')"
                    width="220"
                >
                    <template slot-scope="scope">
                        <el-link
                            :href="'#/productCenter/productBasicInfo?model='+ scope.row.productModelNumber"
                        >{{scope.row.productModelNumber}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('m.label.principal')">
                    <template slot-scope="scope" type="info">
                        <el-tag
                            type="success"
                            size="mini"
                            closable
                            @close="_deletePersonnel(scope.row)"
                        >{{scope.row.userName}}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :length="tableData.length" :pagination="pagination" float="right"></pagination>
            <scrollTable ref="scrollTable"></scrollTable>
        </div>
    </div>
</template>
<script>
import pagination from "@/components/pagination";
import allocation from "./allocation.vue"; 
import personnelList from "./personnelList.vue";
import scrollTable from "@/components/ScrollTable";
import { findProductSubscriptionProductRelList } from "@/api/system/subscription";
const ERR_OK = 200;
export default {
    data() {
        return {
            tableData: [],
            loading: true,
            personnelItem: {},
            pagination: {
                pagesize: 20,
                currpage: 1
            }
        };
    },
    filters: {},
    created() {},
    methods: {
        //下属订阅列表
        getfindUserSubscription(item) {
            this.tableData = [];
            this.pagination.currpage = 1;
            this.loading = true;
            findProductSubscriptionProductRelList({userCharge: item.userId}).then(res => {
                this.tableData = res.data.data.data;
                this.loading = false;
                this.$refs.scrollTable.scrollShow(this.$refs.table);
            });
            this.personnelItem = item;
        },
        // 删除人员
        _deletePersonnel(item) {
            this.$confirm("是否确定删除", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    let itemArr = [
                        {
                            countryId: item.countryId,
                            productId: item.productId,
                            productModelNumber: item.productModelNumber,
                            userId: 0
                        }
                    ];
                    this.$ajax({
                        method: "post",
                        url:
                            this.GLOBAL.productService +
                            "/productSubscriptionUserRel/saveProductListByUserCharge",
                        data: itemArr
                    }).then(res => {
                        if (res.data.code === ERR_OK) {
                            this.$message.success("删除成功");
                            this.tableData.splice(
                                this.tableData.findIndex(
                                    items =>
                                        items.countryId === item.countryId &&
                                        items.productId === item.productId &&
                                        items.userId === item.userId
                                ),
                                1
                            );
                        } else {
                            this.$message.error("删除失败");
                        }
                    });
                })
                .catch(() => {});
        },
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        }
    },
    components: {
        pagination,
        allocation,
        personnelList,
        scrollTable
    }
};
</script>

<style lang="less" scoped>
.el-table{
    margin: 10px 0
}
.el-tag {
    margin: 0 3px 0 0;
}

.distribution {
    overflow: auto;
}

.left {
    position: relative;
    width: 200px;
    float: left;
    border: 1px solid #ebeef5;
}

.content {
    padding-left: 220px;
}
</style>
